<template>
  <div class="mine">
    <h3>饿了么</h3>
    <header>
        <div class="left">
            <div class="pwd"></div>
            <div class="phone">
                <span>gyidwe89809</span>
                <span>158****8903</span>
            </div>
        </div>
        <div class="right">账户设置</div>
    </header>
    <div class="blue">
        <span>吃货卡</span>
        <span>挖金豆</span>
        <span>1461</span>
    </div>
    <div class="money">
        <div class="ML">
            <span>红包</span>
            <span>7张今日到期</span>
        </div>
        <div class="MR">
            <span>余额</span>
            <span>0元</span>
        </div>
    </div>
    <!-- 常用工具 -->
    <div class="often">
        <h3>常用工具</h3>
        <div class="tool">
            <span>我的地址</span>
            <span>我的客服</span>
            <span>店铺关注</span>
            <span>评价有礼</span>
        </div>
    </div>
    <div class="invite">
        <div class="LI"></div>
        <div class="RI"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.mine{
    background-color: aliceblue;
    padding-top: 20px;
}
.mine>h3{
    margin: 20px 10px;
}
header{
    margin: 10px;
    display: flex;
    justify-content: space-between;
}
header>.left{
    display: flex;
}
header>.left>.pwd{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: lightskyblue;
    margin-right: 20px;
}
header>.left>.phone{
    margin-top: 10px;
}
header>.left>.phone>span{
    display: block;
}
header>.left>.phone>span:nth-child(1){
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
}
header>.right{
    width: 80px;
    height: 30px;
    border: 1px solid #333;
    text-align: center;
    line-height: 30px;
    border-radius: 16px;
    margin-top: 30px;
}
.blue{
    width: 84%;
    height: 40px;
    border-radius: 20px;
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
}
.blue>span{
    margin: 20px;
    color: #fff;
    font-size: 18px;
}
.blue>span:nth-child(1){
    font-size: 24px;
    font-weight: bold;
}
.money{
    height: 50px;
    margin: 10px;
    padding: 20px;
    width: 84%;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
}
.ML>span{
    display: block;
}
.MR>span{
    display: block;
}
.often{
    height: 100px;
    margin: 10px;
    padding: 10px 20px 0px 20px;
    width: 84%;
    background-color: #fff;
    border-radius: 20px;
}
.often>.tool{
    display: flex;
    justify-content: space-around;
}
.invite{
    width: 94%;
    height: 120px;
    margin: 10px;
    display: flex;
    justify-content: space-between;
}
.invite>.LI{
    width: 52%;
    background-color: #fff;
    border-radius: 20px;
}
.invite>.RI{
    width: 46%;
    background-color: #fff;
    border-radius: 20px;
}
</style>